<template>
  <div class="">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="商品简介">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          ref="upload"
          action="http://127.0.0.1:1018/upload"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
          :file-list="fileList"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-preview="handlePreview"
          :on-error="handleError"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>

      <!-- <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog> -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { postFunc } from "@/utils/http.js";

export default {
  data() {
    return {
      fileList: [],
      disabled: false,
      form: {
        name: "",
        description: "",
        price: "",
        img: "",
      },
    };
  },

  methods: {
    addShop(form) {
      // this.$refs[form].validate((valid) => {
      if (form) {
        // console.log(this.form);
        let { name, description, price, img } = form;
        postFunc("/shop/add_shop", {
          name,
          description,
          price,
          img,
        }).then((data) => {
          // 上传成功
          if (data.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
          } else {
            console.log(data);
          }
        });
      } else {
        return;
      }
      // });
    },

    handleError(err, file, fileList) {
      this.$message({
        message: "上传失败！",
        type: "error",
      });
      console.log(file);
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;

      if (fileList.length >= 1) {
        this.disabled = true;
      }
      let url = response.url.split("\\")[2];

      this.form.img = url;

      this.addShop(this.form);
    },
    handleRemove(file, fileList) {
      this.fileList = [];
      this.form.img = "";
      this.disabled = false;
    },
    handlePreview(file) {
      // this.dialogImageUrl = file.url;
      this.disabled = true;
    },
    onSubmit() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
